<style scoped>
</style>
<template>
	<div :style="{color:'#fff',backgroundColor:'#000',padding:'10px',height:'600px',overflow:'auto', fontSize:'15px'}">
		<div>----------------【开始执行任务】----------------</div>
		<div v-if="etlTaskType==='main'" :style="{color:'#ff9900'}">【提示：关闭窗口后，任务将转入后台执行】</div>
		<div v-else :style="{color:'#FF5722'}">【提示：脚本任务执行中，请勿关闭窗口】</div>
		<div v-html="content"></div>
		<div :style="this.loadStyle" ref="logHtml">{{loadContent}}</div>
	</div>
</template>
<script>
	export default {
		name: "webSocket",
		props: {
			menuTheme: String,
			executeTaskData: Object,
			etlTaskType: String, //main代表主任务，mount 挂载任务
			interfaceType: {
				type: String,
				default: ''
			},
			mid: String,
			sysName: String
		},
		data() {
			return {
				loadContent: "请耐心等待，任务执行中>",
				loadStyle: {
					color: "#2d8cf0"
				},
				content: "",
				timer: "",
				loginUser: ""
			};
		},
		destroyed() {
			console.log("实例销毁")
			if (this.etlTaskType === 'main') {
				//主任务，发送结束标志，通知服务端不需要再发送执行日志
				const json = {
					type: "taskEnd"
				};
				this.websocketsend(JSON.stringify(json));
				this.$sockets.websock.socket.onmessage = this.$sockets.websocketOnMessage;;
			}
		},
		mounted() {
			this.loginUser = this.$loginUser.userInfo;
			let that = this;
			this.timer = setInterval(function() {
				if (that.loadContent.length === 15) {
					that.loadContent = "请耐心等待，任务执行中>";
				} else {
					that.loadContent = that.loadContent + ">";
				}
			}, 300);
			if (this.etlTaskType === 'main') {
				
				console.log("loginUser");
				console.log(this.loginUser);
				//主任务，执行任务
				const json = {
					type: "taskBegin",
					userName: this.loginUser.chsName,
					kid: this.executeTaskData.kid,
					interfaceType: this.interfaceType,
					systemName: this.executeTaskData.sourcedb,
					tableName: this.executeTaskData.srctable
				};
				this.websocketsend(JSON.stringify(json));
			} 
			this.$sockets.websock.socket.onmessage = this.websocketonmessage;
		},
		methods: {
			websocketonmessage(e) {
				const socketMessage = e.data;
				switch (socketMessage) {
					case "etlTaskDone":
						{
							//任务执行完毕
							let _this = this;
							setTimeout(() => {
								_this.loadContent =
									"----------------【任务执行完毕】----------------";
								_this.loadStyle = {
									color: "#19be6b"
								};
								clearInterval(_this.timer);
								const json = {
									type: "taskEnd"
								};
								_this.websocketsend(JSON.stringify(json));
							}, 1500);
							break;
						}
					case "etlTaskErr":
						{
							//任务执行抽取错误
							let _this = this;
							setTimeout(() => {
								_this.loadContent =
									"----------------【任务抽取失败，请从日志中检查错误】----------------";
								_this.loadStyle = {
									color: "#FF5722"
								};
								clearInterval(_this.timer);
								const json = {
									type: "taskEnd"
								};
								_this.websocketsend(JSON.stringify(json));
							}, 1500);
							break;
						}
					case "pong":
						{
							console.log(e.data);
							break;
						}
					case "mountExecuteEnd":
						{
							//任务执行完毕
							let _this = this;
							setTimeout(() => {
								_this.loadContent =
									"----------------【任务执行完毕】----------------";
								_this.loadStyle = {
									color: "#19be6b"
								};
								clearInterval(_this.timer);
							}, 1500);
							break;
						}
					case "mountExecuteErr":
						{
							//任务执行抽取错误
							let _this = this;
							setTimeout(() => {
								_this.loadContent =
									"----------------【SQL脚本执行失败，请从日志中检查错误】----------------";
								_this.loadStyle = {
									color: "#FF5722"
								};
								clearInterval(_this.timer);
							}, 1500);
							break;
						}
					default:
						{
							if (socketMessage.indexOf("请勿重复执行") > -1) {
								//全局提醒
								if (socketMessage.indexOf(this.loginUser.chsName) < 0) {
									this.$Notice.warning({
										title: '全局提醒',
										desc: socketMessage
									});
								}
							} else if (socketMessage.indexOf("login") > -1) {
								//什么也不做
							} else if (socketMessage.indexOf("msg:") > -1) {
								//什么也不做
							} else if (socketMessage) {
								this.content = this.content + socketMessage;
								this.scrollToBottom();
							}
							break;
						}
				}
			},
			websocketsend(Data) {
				//数据发送
				this.$sockets.websock.socket.send(Data);
			},
			scrollToBottom: function() {
				this.$nextTick(function() {
					this.$refs.logHtml.scrollIntoView({
						block: "end",
						behavior: "smooth"
					});
				});
			}
		}
	};
</script>
